<template>
  <div class="cate">
    <van-nav-bar title="分类" left-text="返回" left-arrow  @click-left="back">
      <template #right >
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <!-- 侧边导航 -->
    <van-sidebar v-model="activeKey" class="navber">
      <van-sidebar-item
        v-for="(item, index) in cateList"
        :key="index"
        :title="item.catename"
      />
    </van-sidebar>

    <!-- 右边图片 -->
    <van-grid :border="false" v-if="cateList.length">
      <van-grid-item
        v-for="(item, index) in cateList[activeKey].children"
        :key="index"
        @click="jump(item.id)"
      >
        <img :src="'http://127.0.0.1:3000' + item.img" alt="" class="pic" />
        {{ item.catename }}
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { getCate } from "../request";
export default {
  data() {
    return {
      activeKey: 0,
      cateList: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      let res = await getCate();
      console.log(res);
      this.cateList = res;
    },
    // 点击的时候根据ID跳转到对应的详情页
    jump(id) {
      this.$router.push("/home/list/" + id);
    },
    back(){
      this.$router.go(-1)
    }
  },
};
</script>

<style>
.navber {
  float: left;
}
.pic {
  width: 100px;
  height: 100px;
}
</style>